//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Button,
    Modal,
} from 'antd';


const FormItem = Form.Item;
const { Option } = Select;



//查看表单
@Form.create()
class ViewForm extends PureComponent {
    static defaultProps = {
        handleViewModalVisible: () => {},
    values: {},
};

constructor(props) {
    super(props);

    this.state = {
        formVals: {
            id: props.values.id,
            nickname: props.values.nickname,
            name: props.values.name,
            value: props.values.value,
            createtime: props.values.createtime,
            type: props.values.type,
            updatable: props.values.updatable,
            creator: props.values.creator,
            status: props.values.status,
            orderid: props.values.orderid,
            memo: props.values.memo,
        },
    };


}



renderContent = (formVals) => {
    const { form } = this.props;

    return (
        <Form  layout="vertical" hideRequiredMark>


				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>


                    <Col  md={12} sm={24}>
	                    <FormItem  label="类型">
	                        {form.getFieldDecorator('nickname', {
	                        rules: [{ required:true , message: '请输入类型！', min: 1 }],
	                        initialValue: formVals.nickname,
	                        })(<Input readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>


                    <Col  md={12} sm={24}>
	                    <FormItem  label="常量显示名称">
	                        {form.getFieldDecorator('name', {
	                        rules: [{ required: true, message: '请输入常亮显示名称！', min: 1 }],
	                        initialValue: formVals.name,
	                        })(<Input readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>


              	</Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>


                    <Col  md={12} sm={24}>
	                    <FormItem  label="常量代码值">
	                        {form.getFieldDecorator('value', {
	                        rules: [{ required: false, message: '请输入常量代码值！', min: 1 }],
	                        initialValue: formVals.value,
	                        })(<Input readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>


                    <Col  md={12} sm={24}>
	                    <FormItem  label="常量排序值">
	                        {form.getFieldDecorator('type', {
	                        rules: [{ required: false, message: '请输入常量排序值！', min: 1 }],
	                        initialValue: formVals.type,
	                        })(<Input readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>


                    <Col md={12} sm={24}>
	                    <FormItem label="是否可编辑">
	                        {form.getFieldDecorator('updatable',{
	                        	initialValue: formVals.updatable + '',
	                        })(
	                            <Select placeholder="请选择" style={{ width: '100%' }}>
	                                <Option value="1">是</Option>
	                                <Option value="0">否</Option>
	                            </Select>
	                        )}
	                    </FormItem>
                    </Col>
                    
                    

                    <Col  md={12} sm={24}>
	                    <FormItem  label="备注">
	                        {form.getFieldDecorator('memo', {
	                        rules: [{ required: false, message: '请输入至少五个字符的备注！', min: 5 }],
	                        initialValue: formVals.memo,
	                        })(<Input readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>

                </Row>
                
                
                {/*<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                    <Col  md={12} sm={24}>
	                    <FormItem  label="类型">
	                        {form.getFieldDecorator('nickname', {
	                        rules: [{ required: true, message: '请输入至少五个字符的昵称！', min: 5 }],
	                        initialValue: formVals.nickname,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="常量显示名称">
	                        {form.getFieldDecorator('name', {
	                        rules: [{ required: true, message: '请输入至少五个字符的常量显示名称！', min: 5 }],
	                        initialValue: formVals.name,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>

                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                    <Col  md={12} sm={24}>
	                    <FormItem  label="常量代码值">
	                        {form.getFieldDecorator('value', {
	                        rules: [{ required: true, message: '请输入至少五个字符的常量代码值！', min: 5 }],
	                        initialValue: formVals.value,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>

                    <Col  md={12} sm={24}>
	                    <FormItem  label="创建日期">
	                        {form.getFieldDecorator('createtime', {
	                        rules: [{ required: true, message: '请输入至少五个字符的创建日期！', min: 5 }],
	                        initialValue: formVals.createtime,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>

                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="常量排序值">
	                        {form.getFieldDecorator('type', {
	                        rules: [{ required: true, message: '请输入至少五个字符的常量排序值！', min: 5 }],
	                        initialValue: formVals.type,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>


                    <Col  md={12} sm={24}>
	                    <FormItem  label="是否可编辑">
	                        {form.getFieldDecorator('updatable', {
	                        rules: [{ required: true, message: '请输入至少五个字符的是否可编辑！', min: 5 }],
	                        initialValue: formVals.updatable + '',
	                        })(<Select placeholder="请选择" style={{ width: '100%' }}>
	                                <Option value="1">是</Option>
	                                <Option value="0">否</Option>
	                            </Select>
	                        )}
	                    </FormItem>
                    </Col>

 
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>


                    <Col  md={12} sm={24}>
	                    <FormItem  label="创建人">
	                        {form.getFieldDecorator('creator', {
	                        rules: [{ required: true, message: '请输入至少五个字符的创建人！', min: 5 }],
	                        initialValue: formVals.creator,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>

                    <Col  md={12} sm={24}>
	                    <FormItem  label="状态">
	                        {form.getFieldDecorator('status', {
	                        rules: [{ required: true, message: '请输入至少五个字符的状态！', min: 5 }],
	                        initialValue: formVals.status,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>


                    <Col  md={12} sm={24}>
	                    <FormItem  label="排序">
	                        {form.getFieldDecorator('orderid', {
	                        rules: [{ required: true, message: '请输入至少五个字符的排序！', min: 5 }],
	                        initialValue: formVals.orderid,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="备注">
	                        {form.getFieldDecorator('memo', {
	                        rules: [{ required: true, message: '请输入至少五个字符的备注！', min: 5 }],
	                        initialValue: formVals.memo,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                	</Col>
                </Row>*/}
    </Form>
);

};



render() {
    const { viewModalVisible, handleViewModalVisible, values } = this.props;
    const { formVals } = this.state;

    return (
        <Modal
    width={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="查看"
    visible={viewModalVisible}
    onCancel={() => handleViewModalVisible(false, values)}
    footer={<Button key="back" onClick = { () => handleViewModalVisible(false, values) }>取消</Button>}
>

    {this.renderContent(values)}
</Modal>
);
}

}

export default ViewForm;


